<#--views##${sysName}##${func.viewPath}##${mainTable.className}Main.vue-->
<#assign pTable=mainTable pTableConfig=mainTableConfig dataGrid=mainTableConfig.dataGrid>
<template>
<div class="grid-page-background"><!-- 单一根，指令才能生效，必须 v-modaldrag --->
  <div class="divide-line"></div>
  <el-row align="middle">
    <el-col :span="8"><div class="grid-title"><label>${pTable.caption!}列表<!--功能名称--></label></div></el-col>
    <el-col :span="16"><div class="grid-title-tip"><!-- 功能描述 --></div></el-col>
  </el-row>
  <div class="divide-line">
  </div>
  {{{VXE-GRID-VUE}}}
<#if pTableConfig.showFormDialog>
  <dayu-form-dialog title="${pTable.tableCaption!}-属性编辑" :formModal="${pTable.beanName}FormModal" <#if (pTableConfig.form.formColumnCount!1)==1>:width="500"<#else>:width="800"</#if> @ok='${pTable.beanName}FormModalHandleOk'>
    <${pTable.className}Form ref="${pTable.beanName}Form" :id="${pTable.beanName}FormModal.id"/>
  </dayu-form-dialog>
</#if>
</div>
</template>

<script lang="ts" setup>

/*
 * @author: ${author}
 * @date: ${nowTime}
 * @template: dayu-code-builder
*/

import { ref, reactive, onMounted, computed, watchEffect } from 'vue'
import { Edit, Delete, Search, Plus, Download as Export, InfoFilled, Refresh as Reset } from '@element-plus/icons';
import { VxeGridProps } from 'vxe-table'
import store from '@/store'
import { FormModal, IForm } from '@/common/FormModal'
import { FilterValue, FilterColumn, FilterColumns, QueryConfig, ListBO, buildDefaultVxeGridOptions, myutil} from '@/common/dayu-common'
import { ActionState } from '@/common/AuthState'
import { mycolors } from '@/common/colors';
import ${pTable.className}Form from './${pTable.className}Form.vue'
import { ${pTable.beanName}Service, ${pTable.className}Stats, ${pTable.className}StatData } from '@/api/${sysName}/${pTable.className}Service';
<#if catalogTable??>
import { ${catalogTable.beanName}Service } from '@/api/${sysName}/${catalogTable.className}Service';
</#if>

const props = defineProps({
  id: Number,
});

/** 授权和锁定状态 */
const actionState = ref(new ActionState(true, true, 0xFFFF, 0, 0));

const ${pTable.beanName}Grid = ref();
const ${pTable.beanName}Form = ref();
const ${pTable.beanName}FormModal = reactive(new FormModal());//表单弹窗

{{{VXE-GRID-TS}}}

<#if dataGrid.toolbarAddBtn!false == true>
/**添加按钮点击事件*/
async function add${pTable.className}BtnClick() {
  ${pTable.beanName}FormModal.showModal();//显示表单对话框
}
</#if>

/** 主区域的高度 */
const mainHeight = ref(800);
/** 监听浏览器窗口大小（监听vuex store里的值，在App.vue中监听window.size事件时会更改） */
watchEffect(() =>{
  mainHeight.value = store.state.windowClient.height - store.state.topBarHeight - store.state.bottomBarHeight - 80;
  gridOptions.gridProps.height = mainHeight.value;
})

onMounted(() => {
  get${pTable.className}List();
});

</script>

<style scoped>

</style>